<template>
  <div class="withdrawal-record">
    <div>
      <van-nav-bar
        title="Recharge Record"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div class="record-list">
      <van-pull-refresh
        v-model="refreshing"
        loading-text="loading……"
        pulling-text="Drop down to refresh"
        loosing-text="Free to refresh"
        success-text="Refresh the success"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text=" "
          loading-text="loading……"
          @load="onLoad"
        >
          <div class="record-li" v-for="item in list" :key="item.id">
            <div class="itemTop">
              <div class="amount">+{{ item.amount | getmoney }}</div>
              <div class="status">
                <p v-if="item.state === 0">
                  <i class="iconfont icon-a-zu5960"></i>
                  <span>Conducting</span>
                </p>

                <p v-if="item.state === 1">
                  <i class="iconfont icon-a-lujing6244"></i>
                  <span>Succeed</span>
                </p>
                <p v-if="item.state === 2">
                  <i class="iconfont icon-a-lujing6246"></i>
                  <span>Faild</span>
                </p>
              </div>
            </div>
            <div class="itemBot">
              <div class="bot-left">{{ item.no }}</div>
              <div class="bot-right">{{ item.created_at }}</div>
            </div>
            <div v-if="item.state === 0">
              <van-divider />
              <p class="tipsInfo">
                <span> If you have successfully, upload a screenshot！ </span>
                <span>
                  <i
                    class="iconfont icon-a-lujing6247"
                    @click="upShotPic(item)"
                  ></i>
                </span>
              </p>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>

    <!-- 上传图片 -->
    <van-overlay :show="popupWindow" @click="popupWindow = false">
      <div class="dialog-notice" @click.stop>
        <div class="notice-card">
          <div class="card-icon">
            <van-icon name="cross" @click="popupWindow = false" />
          </div>
          <h3 class="card-title">upload a screenshot</h3>

          <van-uploader
            v-model="fileList"
            :after-read="afterRead"
            :max-count="1"
          >
            <div class="custom-up">
              <i class="iconfont icon-a-lujing6252"></i>
            </div>
          </van-uploader>

          <button class="confirm" @click="determine">Confirm</button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { uploadAli_os } from "@/utils/common";
import { Toast } from "vant";
export default {
  data() {
    return {
      page: 0,
      refreshing: false,
      limit: 10,
      list: [],
      show: false,
      loading: false,
      finished: false,
      refreshing: false,
      popupWindow: false,
      fileList: [],
      uploadPictures: "",
      order_id: "",
    };
  },
  mounted() {},
  methods: {
    onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.getPetOrders();
    },
    onRefresh() {
      this.finished = false;
      this.page = 0;
      this.loading = true;
      this.onLoad();
    },
    getPetOrders(is) {
      this.page++;
      this.$store
        .dispatch("orders", {
          type: "recharge",
          page: this.page,
          limit: this.limit,
        })
        .then((res) => {
          this.loading = false;
          if (res.length == 0) {
            this.finished = true;
          } else {
            res.forEach((element) => {
              this.list.push(element);
            });
          }
        });
    },
    afterRead(file) {
      file.status = "uploading";
      file.message = "uploading...";
      var geshi = file.file.name;
      if (
        !(
          geshi.indexOf("png") != -1 ||
          geshi.indexOf("gif") != -1 ||
          geshi.indexOf("jpeg") != -1 ||
          geshi.indexOf("jpg") != -1
        )
      ) {
        Toast("The picture format is not correct");
        file.status = "failed";
        file.message = "Failed";
        return;
      }
      /*
    ali-oss上传方法
    */
      uploadAli_os(file.file.name, file.file).then((res) => {
        if (res.res.status == 200) {
          this.uploadPictures = res.name;
          file.status = "done";
          file.message = "successfully";
        } else {
          file.status = "failed";
          file.message = "Failed";
        }
      });
    },
    determine() {
      this.$store
        .dispatch("uploadDoc", {
          order_id: this.order_id,
          image_url: this.uploadPictures,
        })
        .then((res) => {
          Toast("Uploaded successfully");
          this.popupWindow = false;
        });
    },
    upShotPic(value) {
      this.order_id = value.id;
      this.popupWindow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.withdrawal-record {
  height: 100%;
}
.dialog-notice {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .notice {
    padding: 20px 0 0 0;
  }
  /deep/ .van-uploader__preview-image {
    width: 280px !important;
    height: 205px !important;
  }
  .notice-card {
    width: 300px;
    min-height: 225px;
    border-radius: 5px;
    padding: 0 0 10px 0;
    background-color: #fff;
    background-size: contain;
    position: relative;
    text-align: center;
    background-size: contain;
    .card-icon {
      position: absolute;
      right: 10px;
      top: 10px;
    }
    h3 {
      font-size: 17px;
      padding: 20px 0 14px 0;
      color: #333;
    }
    p {
      padding: 0 40px;
      color: #666666;
    }
    .cancel {
      margin: 15px 10px 0 0;
      width: 75px;
      height: 40px;
      color: #4a67f5;
      background: #ffffff;
      border: 1px solid #4c6cf1;
    }

    button {
      i {
        font-size: 13px;
      }
      margin: 15px 0 0 0;
      width: 150px;
      height: 40px;
      background: #4a67f5;
      border-radius: 20px;
      border: none;
      color: #fff;
      box-shadow: 0px 2px 10px rgba(74, 103, 245, 0.4);
    }
  }
}
.custom-up {
  margin: 0 auto;
  width: 270px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
}
.icon-a-lujing6252 {
  font-size: 45px;
  color: #adb4c7;
}
.record-list {
  padding: 13px 13px 60px 13px;
  .record-li {
    margin: 0 0 10px 0;
    padding: 12px;
    background-color: #fff;
    border-radius: 10px;
    .itemTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #333;
      font-size: 13px;
      .amount {
        font-size: 20px;
        color: #4a67f5;
      }
    }
    .icon-a-zu5960 {
      font-size: 13px;
      color: #4a67f5;
    }
    .icon-a-lujing6246 {
      color: #adb4c7;
    }
    .icon-a-lujing6244 {
      color: #28c953;
    }
    .itemBot {
      padding: 5px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #333;
      .bot-left {
        font-size: 15px;
      }
      .bot-right {
        font-size: 13px;
        color: #888888;
      }
    }
    .tipsInfo {
      font-size: 12px;
      color: #888888;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .icon-a-lujing6247 {
        color: #4a67f5;
        font-size: 15px;
      }
    }
    .status {
      span {
        margin: 0 0 0 5px;
      }
    }
  }
}
</style>